import * as React from 'react';
import { use{{componentName}}_unstable } from './use{{componentName}}';
import { render{{componentName}}_unstable } from './render{{componentName}}';
import { use{{componentName}}Styles_unstable } from './use{{componentName}}Styles';
import type { {{componentName}}Props } from './{{componentName}}.types';
import type { ForwardRefComponent } from '@fluentui/react-utilities';

/**
 * {{componentName}} component - TODO: add more docs
 */
export const {{componentName}}: ForwardRefComponent<{{componentName}}Props> = React.forwardRef((props, ref) => {
  const state = use{{componentName}}_unstable(props, ref);

  use{{componentName}}Styles_unstable(state);
  return render{{componentName}}_unstable(state);
});

{{componentName}}.displayName = '{{componentName}}';
